<template>
  <div add-component class="editor">
    <quill-editor ref="editor" :options="options" :value='value' @input='e=>onInput(e)'></quill-editor>
    <form ref="uploader" :action="action" method="post" enctype="multipart/form-data">
       <input ref="file" type="file" :name="name" :accept="accept" @change="onUploadImage">
    </form>
  </div>
</template>

<script>
import Quill from 'quill'
import _ from '../../libs/utils'

export default {
    props:['value'],
    data(){
        return {
            quill:null,
            toolbar:null,
            visiable:false,
            imageLoading:false,
            name:'filename',
            action:'/api/file/uploadImage?type=article',
            accept:'image/jpg,image/jpeg,image/png,image/gif',
            options:{
                placeholder: "输入任何内容，支持html",
                modules: {
                    toolbar:[
                        [{ 'font': [] }],
                        [{ 'size': [] }],  // custom dropdown
                        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                        ['bold', 'italic', 'underline', 'strike'],
                        [{ 'color': [] }, { 'background': [] }],
                        [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                        [{ 'align': [] }],
                        ['image', 'link']
                    ]//,
                    // imageResize: {
                    //     displayStyles: {
                    //         backgroundColor: 'black',
                    //         border: 'none',
                    //         color: 'white'
                    //     },
                    //     modules: [ 'Resize', 'DisplaySize']
                    // }
                }
            }
        }
    },
    computed:{
        editor(){
            return this.$refs.editor;
        },
        uploader(){
            return this.$refs.uploader;
        },
        file(){
            return this.$refs.file;
        }
    },
    methods:{
        onInput(e){
            this.$emit('input', e);
        },
        onImageClicked(){
            this.file.click();
        },
        async onUploadImage(){
            this.imageLoading = true;
            try
            {
                this.$Loading.start();
                let ret = await this.uploadImage();
                if(ret.stat != 'ok'){
                    await this.onUploadFailed(ret);
                    return;
                }

                await this.onUploadSuccess(ret.ret);
                await this.applyImage(ret.ret.path);                
                this.file.value = '';

            }catch(e){                
                this.file.value = '';
                this.onUploadFailed(e);
            }
            this.imageLoading = false;

        },
        async onUploadSuccess(e){
            this.$Loading.finish();

        },
        async onUploadFailed(e, type){
            console.log(e);
            this.$Loading.error();

        },
        async onUploadProgress(e){

        },
        async applyImage(url){
            var range = this.quill.getSelection();
            this.quill.insertEmbed(range?range.index:0, 'image', url, Quill.sources.USER);
        },
        async uploadImage(){            
            var data = new FormData(this.uploader);
            return await _.ajax.form({
                url:this.action,
                data:data
            })
        }
    },
    mounted(){
        this.quill = this.editor.quill;
        this.toolbar = this.quill.getModule('toolbar');
        this.toolbar.addHandler('image', e=>this.onImageClicked(e));
    }
}
</script>

<style scoped>
    [editor-component] {
        overflow: auto;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .editor form input{
        display: none;
    }

</style>